<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script type="module">
  </script>
  <script>
    function dataURItoBlob(dataURI) { // base64转blob
      const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0] // mime类型 可以设置 返回的blob 有type 不设置 js自己判断 
      //   const byteString = atob(dataURI.split(',')[1]) // base64 解码
      return new Blob([dataURI], { type: mimeString })
    }

  </script>
  <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
  <script>dayjs().format()</script>
  <script>window.onload = function () {
      var receiver = document.getElementById('receiver').contentWindow;
      var btn = document.getElementById('sendMessage');
      console.log(receiver)
      receiver.pr()
      btn.addEventListener('click', function (e) {
        e.preventDefault();
        var val = 'asa'
        receiver.postMessage("message", 'http://localhost:3000/index1');
        // window.addEventListener('message', function (e) {
        //   alert(e.data)
        // })
      });
    }</script>
</head>

<body>
  <iframe src="http://localhost:4000/index1" id="receiver" frameborder="0" width="400" height="400"></iframe>
  <button id="sendMessage">点击asa</button>
  <input type="file" id="file" multiple>
  <button id="but">提交</button>
  <button id="down">下载</button>
  <button id="cookie">cookie</button>
  <form action="http://localhost:3000/upload" enctype="multipart/form-data" method="POST">
    <input type="file" name="file" multiple>
    <button type="submit">提交</button>
  </form>
  <img src="" id="send" alt="暂无" width="200" height="200">
  <div id="app">
    {{msg}}
    <form1></form1>
  </div>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    var file = document.getElementById('file')
    var but = document.getElementById('but')
    var body = document.body
    var li; // 保持form 信息
    axios({
      url: 'http://localhost:3000/a',
      data: {
        name: 'liu',
        age: 12
      },
      method: 'post'
    }).then(x => {
      console.log(x)
    })
    axios({
      url: 'http://localhost:3000/b',
      params: {
        name: 'liu',
        age: 12
      },
      method: 'get'
    }).then(x => {

    })
    axios({
      url: 'http://localhost:3000/send',
      responseType: 'blob',
      method: 'post'
    }).then(x => {
      console.log(x)
      console.log(x.data)
      let send = document.getElementById('send')
      send.setAttribute('src', URL.createObjectURL(new Blob([x.data])))
    })
    but.onclick = function () {
      axios({
        url: 'http://localhost:3000/upla',
        data: li,
        method: 'post',
        headers: {
          "content-type": "multipart/form-data"
        }
      }).then(x => {
        console.log(x)
      })
    }
    file.onchange = function (list) {
      console.log(list.target.files)
      console.log(Array.from(list.target.files))
      var fileObjList = Array.from(list.target.files)
      var listUpl = []
      var form = new FormData()

      let arr = Array.from(list.target.files)
      for (var i = 0; i < arr.length; i++) {
        console.log(arr[i])
        form.append('file', arr[i])//file注意多文件格式 单文件file不需要循环
      }
      console.log(form.getAll('file'))
      li = form
      fileObjList.map((res, index) => {
        console.log(new Blob([res], { type: res.type }))
        listUpl[index] = new Blob([res], { type: res.type })
      })
      listUpl.map((upl, index) => {
        var img = document.createElement('img')
        img.src = URL.createObjectURL(upl)
        img.setAttribute('width', '100px')
        img.setAttribute('height', '100px')
        body.appendChild(img) // blob显示
        var a = document.createElement('a')
        a.setAttribute('download', fileObjList[index].name)
        a.setAttribute('href', URL.createObjectURL(upl))
        a.click()
      })
      listUpl.map((upl, index) => {
        var read = new FileReader()
        read.readAsDataURL(upl)
        read.onload = function (data) {
          var img = document.createElement('img')
          img.src = data.target.result
          img.setAttribute('width', '100px')
          img.setAttribute('height', '100px')
          body.appendChild(img) // base64显示
          var a = document.createElement('a')
          a.setAttribute('download', fileObjList[index].name)
          a.setAttribute('href', data.target.result)
          a.click()
        }
      })
    }
  </script>
  <script>
    let cookie = document.getElementById('cookie')
    cookie.onclick = function () {
      document.cookie = 'name=1'
      axios({
        url: '/cookie',
        method: 'post',
        withCredentials: true
      })
    }
    let user = {
      a: 1,
      b: 2
    }
    let info = {}
    Object.keys(user).map(res => {
      info[res] = user[res]
    })
    let down = document.querySelector('#down')
    let body1 = document.body
    let a = document.createElement('a')
    down.onclick = function () {
      axios({
        url: '/video',
        method: 'post',
        responseType: 'blob'
      }).then(res => {
        // let file = new File([new Blob([res.data])], 'a', { type: 'video/mp4' })
        let base = new FileReader()
        base.readAsDataURL(new Blob([res.data]))
        base.onload = function (result) {
          console.log(result.target.result)
          a.setAttribute('href', result.target.result)
          a.setAttribute('download', '1.mp4')
          body.appendChild(a)
          a.click()
          body.removeChild(a)
        }

      })
    }
  </script>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="/js/form.js"></script>
  <script>
    new Vue({
      el: "#app",
      data() {
        return {
          msg: 'hello world'
        }
      },
      components: {
        form1: form
      }
    })
  </script>
</body>

</html>